<template>
	<div class="me flexDirection">
		<div class="me_banner">
			<img src="/static/image/workBanner.png" alt="" class="bj" />

			<div style="position: absolute; width: 100%" :style="{ top: MenuButton?.top + 'px' }"
				v-if="loginType == '内部人员'">
				<div style="
            font-size: 32rpx;
            color: #fff;
            font-weight: 500;
            margin-top: 10rpx;
            text-align: center;
          "
		  @click.stop="changeOrgFn"
		  >
					{{ userInfo?.CustomName || utils.getStorage('userInfo')?.CustomName }}
				</div>
			</div>
		</div>
		<div class="me_content">
			<div class="me_order m_c_item">
				<div class="order_head">
					<div class="order_head_left">通用服务</div>
				</div>
				<div class="order_content" v-if="serviceInfoList?.length > 0">
					<template v-for="(item, index) in serviceInfoList" :key="index">
						<div class="order_content_item" @click.stop="toOrder(item)">
							<div class="order_content_item_icon">
								<img :src="item?.iconImg" alt="" />
							</div>
							<div class="order_content_item_name">{{ item?.title }}</div>
							<div class="tipNum flexCenter" v-if="item.number">
								{{ item.number }}
							</div>
						</div>
					</template>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue';
	import utils from '@/utils/index';
	import { useStore } from 'vuex';
	import { onLoad } from '@dcloudio/uni-app';

	import { Utils } from '@/utils/utils';
	import { changeOrg, getOrderList, saveOrder } from '@/api/user';
	const { getters, dispatch, commit } = useStore();
	// 去订单页面
	const toOrder = (v : any) => {

		if (Utils.getLoginType() == '客户') {
			wx.requestSubscribeMessage({
				tmplIds: ['rAG8ViGLQH99zGxJASwSpTC4zd7OQg0_kk4zNacOUeI'],
				success(res) {
					utils.navigateTo('order/index/index?title=' + v.title);
				}
			})
		} else {
			utils.navigateTo('order/index/index?title=' + v.title);
		}


	};
	const changeOrgFn = async()=>{
		console.log(123);
		await changeOrg({
			data:JSON.stringify({
			OrgNumber:'D66'
			})
		})
	}
	/**
	 * 获取用户信息
	 */
	const userInfo = computed(() => {
		return getters['user/userInfo'];
	});
	const getLoginCustomer = async () => {
		const phoneObj = Utils.getStorage('userPhone');
		// console.log(phoneObj);
		if (!phoneObj) return;
		const phone = phoneObj.data?.phone_info?.purePhoneNumber
		const res : any = await getOrderList({
			data: JSON.stringify({
				FormId: Utils.getFormId('客户'),
				// 
				FieldKeys: "F_WXPhone,FNumber,FName,FCUSTID",
				FilterString: [
					Utils.getFilterString('F_WXPhone', phone, '=')
				],
				OrderString: '',
			}),
		});

		if (res && res.length > 0) {
			const item = res[0]
			const customerObj = {
				F_WXPhone: item[0],
				FNumber: item[1],
				FName: item[2],
				FCUSTID: item[3]
			}
			Utils.setStorage('currentCustomer', customerObj)
			// console.log(customerObj, '获取的客户信息');
			uni.login({
				provider: 'weixin',
				success(res) {
					if (res.code) {
	
						const code = res.code;
						saveOpenId(code, item[3])

					} else {
						console.log('登录失败！' + res.errMsg)
					}
				}
			})

		}
	}
	/**
	 * 把当前用户openid绑定到客户
	 */
	const saveOpenId = async (code : any, id : any) => {
		const say = uniCloud.importObject("getOpenId")
		let openId = await say.getOpenId(code)
		Utils.setStorage('openId', openId)
		// console.log(openId.data.openid,id);
		if(openId?.data?.openid){
			const params : any = {}
			params.Model = {
				FCUSTID: id,
				F_OpenId: openId?.data?.openid,
			}
			params.NeedUpDateFields = ['F_OpenId'];
			params.IsDeleteEntry = false;
			// console.log(params, 'params');
			// return;
			await saveOrder({
				FormId: Utils.getFormId('客户'),
				data: JSON.stringify(params),
			});
		}
	

	}
	// 登录类型
	const loginType = ref('')
	/**
	 * 菜单列表
	 */
	const serviceInfoList = ref()
	const MenuButton = ref();
	onLoad(() => {
		// 获取用户信息
		MenuButton.value = uni.getMenuButtonBoundingClientRect();
		loginType.value = Utils.getStorage('loginType') || ''
		// 获取菜单列表
		if (loginType.value == '内部人员') {
			serviceInfoList.value = Utils.getServiceType();
		} else if (loginType.value == '客户') {
			getLoginCustomer()
			serviceInfoList.value = [
				{
					title: '对账单',
					iconImg: '/static/my/pay.png',
					FormId: 'k5dbf3e0671184d9abcdeb3bf5a988976',
					FieldKeys: '',
					pageUrl: 'rkd',
					number: 0,
				},
			]
		}
	});
</script>

<style lang="less" scoped>
	.me {
		height: 100vh;

		.me_banner {
			position: relative;
			height: 440rpx;

			.bj {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 600rpx;
				z-index: -1;
			}

			.b_content {
				display: flex;
				align-items: center;

				image {
					width: 130rpx;
					height: 130rpx;
					margin-right: 32rpx;
					border-radius: 50%;
				}

				view {
					font-weight: 500;
					font-size: 42rpx;
					color: #000000;
				}
			}
		}

		.me_content {
			flex: 1;
			position: relative;
			padding: 20rpx 24rpx;
			border-radius: 20rpx 20rpx 0 0;
			background: #f6f6f6;
			z-index: 999;

			.m_c_item {
				padding: 24rpx;
				background: #ffffff;
				border-radius: 20rpx;
			}

			.me_order {
				margin-bottom: 20rpx;

				.order_head {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10rpx 0 20rpx;
					border-bottom: 1px solid #ccc;
					margin-bottom: 20rpx;

					.order_head_left {
						font-weight: 700;
						font-size: 36rpx;
					}
				}

				.order_content {
					display: flex;
					flex-wrap: wrap;
					padding: 20rpx 0;

					.order_content_item {
						position: relative;
						width: 25%;
						margin: 20rpx 0;

						.order_content_item_icon {
							display: flex;
							justify-content: center;
							margin-bottom: 12rpx;

							image {
								width: 80rpx;
								height: 80rpx;
							}
						}

						.order_content_item_name {
							color: #000000;
							font-size: 32rpx;
							text-align: center;
						}

						.tipNum {
							position: absolute;
							top: 0;
							right: 0;
							transform: translate(-60%, -35%);
							min-width: 30rpx;
							border-radius: 20rpx;
							background: #eb3a35;
							font-size: 20rpx;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>